<template>
  <el-table
    :data="props.tableData"
    border
    style="width: 100%"
    max-height="300px"
  >
    <el-table-column
      v-for="(column, index) in props.tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      show-overflow-tooltip
    >
      <template #default="scope">
        <!-- <div v-if="column.format" v-html="column.render(scope.row)"></div>
        <span v-else>{{ scope.row[column.prop] }}</span> -->
        <span v-if="column.type === 'index'">
          {{ scope.$index + 1 }}
        </span>
        <render-cell
          v-else
          :row="scope.row"
          :column="column"
          @cell-click="handleCellClick"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
  },
  tableColumns: {
    type: Array,
    required: true,
  },
});

// 渲染组件
const RenderCell = ({ row, column }, { emit }) => {
  if (column.render) {
    return column.render(row);
  }
  return h('span', row[column.prop]);
};

const handleCellClick = (row) => {
  console.log(row);
};
</script>
